showPage()

function showPage() {
  let id = localStorage.getItem('COLUMNID')
  console.log(id)
  if(id == 29){ // 9块9包邮
    $.ajax({
      url: `https://xiongmaoyouxuan.com/api/column/${id}`,
      type: 'get',
      success(res) {
        if (res.code === 200) {
          titleNavOnload(res.data) // 渲染title和2级导航

          // 默认渲染第一个二级导航页面。
          let list = res.data.subColumns
          let defaultId = list[0].id
          $.ajax({
            url: `https://xiongmaoyouxuan.com/api/sub_column/${defaultId}/items?start=0`,
            type: 'get',
            success(res){
              if(res.code === 200){ pageOnload(res.data) }
            }
          })
        }
      }
    })
  }else if(id == 3183){ // 夏季女装上新tab
    $.ajax({
      url: `https://xiongmaoyouxuan.com/api/column/${id}`,
      type: 'get',
      success(res){
        if(res.code == 200){
          titleNavOnload(res.data) // 渲染title和2级导航

          $.ajax({
            url: `https://xiongmaoyouxuan.com/api/column/${id}/items?start=0`,
            type: 'get',
            success(res){
              if(res.code === 200){ pageOnload(res.data) }
            }
          })  
        }
      }
    })
  }else if(id == 170){ // 超值大额券
    $.ajax({
      url: `https://xiongmaoyouxuan.com/api/column/${id}`,
      type: 'get',
      success(res){
        if(res.code == 200){
          titleNavOnload(res.data) // 渲染title和2级导航

          // 默认渲染第一个二级导航页面。
          let list = res.data.subColumns
          let defaultId = list[0].id
          $.ajax({
            url: `https://xiongmaoyouxuan.com/api/sub_column/${defaultId}/items?start=0`,
            type: 'get',
            success(res){
              if(res.code === 200){ pageOnload(res.data) }
            }
          })
        }
      }
    })
  }
}

/**
 * 渲染title区域和2级导航区域
 * @param  data  <json对象>  通过ajax调取接口获取的响应数据
 */
function titleNavOnload(data) {
  // 标题
  let title = data.share.title
  $('.content-title').html(`<h2>${title}</h2>`)
  
  // 二级导航数据
  let navList = data.subColumns
  if(navList.length){
    let titleNavArr = navList.map(list => {
      return `
        <li onclick="goToGoal(${list.id})">${list.name}</li>
      `
    })   
    let ol = document.createElement('ol')
    ol.innerHTML = titleNavArr.join('')
    document.querySelector('.content-menu').appendChild(ol)
    document.querySelectorAll('ol li')[0].className = 'ac'
  }

  

}


/**
 * 点击2级导航
 * @param {*} data 
 */

function goToGoal(id) {
  console.log(id)

  $.ajax({
    url: `https://xiongmaoyouxuan.com/api/sub_column/${id}/items?start=0`,
    type: 'get',
    success(res){
      let data = res.data
      pageOnload(data)
    }
  })
}

/**
 * 渲染页面
 */
function pageOnload(data) {
  let list = data.list
  let pageArr = list.map(item => {
    let priceStr = String(item.price) // 价格只有一个数据，转成字符串处理
    let priceStrong = priceStr.slice(0, priceStr.indexOf('.')) // 第一个截取到 . 之前
    let digit = priceStr.slice(priceStr.indexOf('.')) // 从 . 截取到最后
    return `
    <li class="show-item" onclick="goToList(${item.id})">
      <div class="show-img">
        <img src="${item.image}" alt="">
      </div>

      <div class="show-msg">
        <div class="show-title">
          ${item.title}
        </div>

        <div class="show-keyword">
          <span class="keyword taobao">淘宝</span>
          <span class="keyword">${item.keywords}</span>
          <span class="keyword free-postage">包邮</span>
        </div>

        <div class="show-foot">
          <div class="left">  
            <span class="price">
              <span class="price-tag">￥</span>
              <span class="price-strong">${priceStrong}</span>
              <span class="digit">${digit}</span>
            </span>
            <span class="sale-num">${item.saleNum}</span>
          </div>
          
          <span class="coupon-value">${item.couponValue}</span>
        </div>
      </div>
    </li>
    
    `
  })
  $('.show-list').html(pageArr.join(''))
}

/**
 * 跳转详情页面 ———— 每日精选
 * pageOnload()中，给li添加的点击事件
 */
 function goToList(id){
  console.log(id)
 $.ajax({
   type:'get',
   url: 'https://xiongmaoyouxuan.com/api/detail',
   data: {
     id
   },
   success(res){
     if(res.code === 200){
     //  location.href = `http://xiongmaoyouxuan.com/?r=share#/item/${id}?`
     // let listShopMsg = JSON.parse(localStorage.getItem('LISTMSG')) || [] 
     localStorage.setItem('LISTDETAILSID',id)
     window.open('list.html','_blank')
     }
   },
  
 })
}